<template>
  <div class="app-content">
    <header v-if="$slots.header">
      <slot name="header"></slot>
    </header>
    <div class="header-tab" v-if="$slots.headerTab">
      <slot name="headerTab"></slot>
    </div>
    <main class="main">
      <slot></slot>
    </main>
    <footer v-if="$slots.footer">
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'CView'
}
</script>

<style lang="less">
.app-content {
  .header-tab {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    padding: 12px 15px 0 15px;
    background-color: @white;
    border-bottom: 1px solid @border-default;

    .el-tabs__header {
      margin-bottom: 0;
    }
    .header-btn {
      margin-bottom: 8px;
    }
  }
  header {
    position: relative;
    display: flex;
    padding: 8px 15px;
    margin-top: 2px;
    background-color: @white;
    border-bottom: 1px solid @border-default;
    .title {
      display: flex;
      justify-content: space-between;
      width: 100%;
      font-size: @f18;
      line-height: 30px;
    }
    .header-btn {
      position: absolute;
      right: 15px;
    }
  }
  .main {
    position: relative;
    overflow: hidden;
    &__box {
      min-height: calc(100vh - 84px);
      padding: 10px 15px;
      overflow: hidden;
      background-color: @white;

      .header-btn {
        margin-top: -10px;
        margin-bottom: 10px;
      }
      .btn-group {
        margin: 0 10px 10px 0;
      }
    }
  }
}
</style>
